<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/js/elementui/index.css">
    <script src="/js/vue/vue.js"></script>
    <script src="/js/axios/axios.min.js"></script>
    <script src="/js/qs/qs.min.js"></script>
    <script src="/js/elementui/index.js"></script>
</head>
<body>
    <div id="app">
        <h1>商品审核</h1>
        <el-table
                :data="tableData"
                style="width: 100%;margin: 10px auto">
            <el-table-column prop="productNumber" label="编号">
                <template slot-scope="scope" @click="">
                    <span>{{ scope.row.productNumber }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="productName" label="商品名称">
                <template slot-scope="scope">
                    <span>{{ scope.row.productName }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="productKind" label="商品种类">
                <template slot-scope="scope">
                    <span>{{ scope.row.productKind }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="productCostPrice" label="成本价(￥)">
                <template slot-scope="scope">
                    <span>{{ scope.row.productCostPrice }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="productPrice" label="零售价(￥)">
                <template slot-scope="scope">
                    <span>{{ scope.row.productPrice }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="productIntegral" label="积分">
                <template slot-scope="scope">
                    <span>{{ scope.row.productIntegral }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="productQuality" label="商品质量">
                <template slot-scope="scope">
                    <el-tag type="success" v-if="scope.row.productQuality > 0">优</el-tag>
                    <el-tag type="info" v-else-if="scope.row.productApplyStatus == 0">良</el-tag>
                    <el-tag type="danger" v-else>差</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="productApplyStatus" label="审核状态">
                <template slot-scope="scope">
                    <el-tag type="info" v-if="scope.row.productApplyStatus == 0">待审核</el-tag>
                    <el-tag v-else-if="scope.row.productApplyStatus == 1">审核通过</el-tag>
                    <el-tag type="danger" v-else>审核不通过</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            type="success"
                            icon="el-icon-check"
                            size="mini"
                            @click="handleApply(scope.$index, scope.row)">通过</el-button>
                    <el-button
                            type="danger"
                            icon="el-icon-close"
                            size="mini"
                            @click="noApply(scope.$index, scope.row)">不通过</el-button>
                    <el-button
                            type="warning"
                            icon="el-icon-s-unfold"
                            size="mini"
                            @click="selectApply(scope.$index, scope.row)">查看</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 分页· -->
        <el-pagination
                small
                layout="prev, pager, next"
                @current-change="productList"
                :total="total"
                :current-page="current"
                :page-size="pageSize"
        >
        </el-pagination>

        <!-- 单个商品详细信息 -->
        <el-dialog title="查看商品的详细信息" :visible.sync="dialogFormVisible">
            <el-form :model="product">
                <el-form-item label="商品编号:">
                    <span>{{product.productNumber}}</span>
                </el-form-item>
                <el-form-item label="商品名称:" >
                    <span>{{product.productName}}</span>
                </el-form-item>
                <el-form-item label="商品图片:" >
                    <span>{{product.productImg}}</span>
                </el-form-item>
                <el-form-item label="商品种类:" >
                    <span>{{product.productKind}}</span>
                </el-form-item>
                <el-form-item label="成本价(￥):" >
                    <span>{{product.productCostPrice}}</span>
                </el-form-item>
                <el-form-item v-if="product.productKind == '普通商品'"  label="零售价(￥):" >
                    <span>{{product.productPrice}}</span>
                </el-form-item>
                <el-form-item v-if="product.productKind == '积分商品'" label="积分:" >
                    <span>{{product.productIntegral}}</span>
                </el-form-item>
                <el-form-item label="商品分类:" >
                    <span>{{product.categories.name}}</span>
                </el-form-item>
                <el-form-item label="公司:" >
                    <span>{{product.company.companyName}}</span>
                </el-form-item>
                <el-form-item label="商品备注:">
                    <span>{{product.productRemarks}}</span>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</body>
<script>
    new Vue({
        el:"#app",
        data(){
            return{
                tableData: null,            //表示数据
                total:0,                    //总条数
                current:1,                  //当前条数
                pageSize:10,                //每条条数
                dialogFormVisible:false,
                product: {
                    id:'',
                    productNumber:'',
                    productName: '',
                    productImg:'',
                    productKind:'',
                    productQuality:'',              //商品质量
                    productCostPrice: '',
                    productPrice: '',
                    productIntegral:'',
                    productEnterprise:'',
                    productApplyStatus:'',          //审核状态
                    productStatus:'',               //商品状态
                    productRemarks:'',              //备注
                    companyId:'',
                    categories:'',                  //分类信息
                    company:''                      //公司信息
                }
            }
        },
        methods:{
            //查询所有没有通过审核的商品
            productList(){
                axios.get("/pageProductsByApply?current="+this.current).then(value => {
                    if (value.data.code==1){
                        this.tableData=value.data.data.records;
                        this.total=value.data.data.total;
                        this.current=value.data.data.current;
                        this.pageSize=value.data.data.pageSize;
                    }
                })
            },
            //点击通过
            handleApply(index,row){
                if (row.productApplyStatus==-1){
                    this.$message("商品不允许通过审核,请去修改商品信息!!!");
                }else {
                    this.product=row;
                    this.product.productApplyStatus=1;
                    this.updateApply();
                }
            },
            //点击不通过
            noApply(index,row){
                this.product=row;
                this.product.productApplyStatus=-1;
                this.updateApply();
            },
            updateApply(){
                axios.put("/product2",this.product).then(value => {
                    if (value.data.code == 1){
                        this.productList();
                    }
                });
            },
            selectApply(index,row){
                this.dialogFormVisible=true;
                this.product=row;
            }
        },
        mounted(){
            this.productList();
        }
    })
</script>
</html>